<template>
	<view class="coop-container page-container-with-bottom-btn">

		<!-- 合作介绍 -->
		<view class="intro-section">
			<view class="intro-content">
				<text class="intro-title">携手共赢，共创茶业未来</text>
				<text class="intro-desc">六堡茶业诚邀各界合作伙伴，共同打造优质茶叶供应链，实现互利共赢的长期合作关系。</text>
			</view>
			<image :src="$tools.buildUrl('/static/images/coop-banner.jpg')" mode="widthFix" class="intro-image"></image>
		</view>

		<!-- 合作类型 -->
		<view class="type-section">
			<view class="section-title">
				<text class="title-text">合作类型</text>
			</view>
			<view class="type-list">
				<view class="type-item" v-for="(item, index) in coopTypes" :key="index">
					<view class="type-icon">
						<u-icon :name="item.icon" size="32" color="#1c705e"></u-icon>
					</view>
					<view class="type-content">
						<text class="type-title">{{ item.title }}</text>
						<text class="type-desc">{{ item.desc }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 合作优势 -->
		<view class="advantage-section">
			<view class="section-title">
				<text class="title-text">合作优势</text>
			</view>
			<view class="advantage-grid">
				<view class="advantage-item" v-for="(item, index) in advantages" :key="index">
					<view class="advantage-number">{{ index + 1 }}</view>
					<text class="advantage-title">{{ item.title }}</text>
					<text class="advantage-desc">{{ item.desc }}</text>
				</view>
			</view>
		</view>

		<!-- 合作要求 -->
		<view class="requirement-section">
			<view class="section-title">
				<text class="title-text">合作要求</text>
			</view>
			<view class="requirement-list">
				<view class="requirement-category" v-for="(category, index) in requirements" :key="index">
					<text class="category-title">{{ category.title }}</text>
					<view class="requirement-items">
						<view class="requirement-item" v-for="(item, itemIndex) in category.items" :key="itemIndex">
							<u-icon name="checkmark-circle" size="20" color="#1c705e"></u-icon>
							<text class="requirement-text">{{ item }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 合作流程 -->
		<view class="process-section">
			<view class="section-title">
				<text class="title-text">合作流程</text>
			</view>
			<view class="process-timeline">
				<view class="timeline-item" v-for="(item, index) in processes" :key="index">
					<view class="timeline-dot">
						<text class="dot-number">{{ index + 1 }}</text>
					</view>
					<view class="timeline-content">
						<text class="timeline-title">{{ item.title }}</text>
						<text class="timeline-desc">{{ item.desc }}</text>
					</view>
					<view class="timeline-line" v-if="index < processes.length - 1"></view>
				</view>
			</view>
		</view>

		<!-- 成功案例 -->
		<view class="case-section">
			<view class="section-title">
				<text class="title-text">成功案例</text>
			</view>
			<view class="case-list">
				<view class="case-item" v-for="(item, index) in cases" :key="index">
					<image :src="item.image" mode="aspectFill" class="case-image"></image>
					<view class="case-content">
						<text class="case-title">{{ item.title }}</text>
						<text class="case-desc">{{ item.desc }}</text>
						<view class="case-tags">
							<text class="case-tag" v-for="(tag, tagIndex) in item.tags" :key="tagIndex">{{ tag }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 联系方式 -->
		<view class="contact-section">
			<view class="section-title">
				<text class="title-text">联系我们</text>
			</view>
			<view class="contact-info">
				<view class="contact-item">
					<u-icon name="phone" size="24" color="#1c705e"></u-icon>
					<view class="contact-content">
						<text class="contact-label">合作热线</text>
						<text class="contact-value">400-888-6789</text>
					</view>
				</view>
				<view class="contact-item">
					<u-icon name="email" size="24" color="#1c705e"></u-icon>
					<view class="contact-content">
						<text class="contact-label">合作邮箱</text>
						<text class="contact-value">coop@liubao.com</text>
					</view>
				</view>
				<view class="contact-item">
					<u-icon name="weixin" size="24" color="#1c705e"></u-icon>
					<view class="contact-content">
						<text class="contact-label">微信咨询</text>
						<text class="contact-value">liubao_coop</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="bottom-actions">
			<button class="action-btn secondary" @click="makeCall">电话咨询</button>
			<button class="action-btn primary" @click="submitApplication">提交申请</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 合作类型
				coopTypes: [{
						icon: 'leaf',
						title: '茶叶供应商',
						desc: '提供优质茶叶原料，建立长期稳定的供应关系'
					},
					{
						icon: 'car',
						title: '物流合作',
						desc: '提供专业的茶叶运输和仓储服务'
					},
					{
						icon: 'shop',
						title: '渠道代理',
						desc: '成为区域代理商，拓展销售渠道'
					},
					{
						icon: 'setting',
						title: '技术合作',
						desc: '在茶叶加工、包装等技术领域深度合作'
					}
				],
				// 合作优势
				advantages: [{
						title: '品牌实力',
						desc: '知名茶叶品牌，市场认知度高，品质有保障'
					},
					{
						title: '稳定订单',
						desc: '长期稳定的采购需求，保证合作伙伴收益'
					},
					{
						title: '技术支持',
						desc: '提供专业技术指导和培训支持'
					},
					{
						title: '共同发展',
						desc: '携手合作伙伴共同成长，实现互利共赢'
					}
				],
				// 合作要求
				requirements: [{
						title: '基本要求',
						items: [
							'具有合法的经营资质和良好的商业信誉',
							'拥有相关行业经验和专业技术能力',
							'具备一定的资金实力和风险承受能力',
							'认同六堡茶品牌文化和经营理念'
						]
					},
					{
						title: '质量要求',
						items: [
							'严格按照国家标准和公司要求进行生产',
							'建立完善的质量管理体系',
							'接受公司的质量监督和检查',
							'确保产品质量稳定可靠'
						]
					}
				],
				// 合作流程
				processes: [{
						title: '初步接触',
						desc: '通过电话、邮件等方式进行初步沟通'
					},
					{
						title: '资质审核',
						desc: '提交相关资质材料，进行资格审核'
					},
					{
						title: '实地考察',
						desc: '双方进行实地考察，深入了解合作条件'
					},
					{
						title: '商务谈判',
						desc: '就合作条款、价格等进行详细谈判'
					},
					{
						title: '签订合同',
						desc: '签订正式合作协议，明确双方权责'
					},
					{
						title: '开始合作',
						desc: '正式开始合作，建立长期合作关系'
					}
				],
				// 成功案例
				cases: [{
						title: '广西茶园合作社',
						desc: '与我们建立了长期的茶叶供应合作关系，年供应量达到500吨',
						image: 'https://img-lbc.shoplnk.cn/static/images/case1.jpg',
						tags: ['茶叶供应', '长期合作', '优质茶源']
					},
					{
						title: '顺丰物流',
						desc: '在茶叶运输方面建立了深度合作，确保产品安全快速配送',
						image: 'https://img-lbc.shoplnk.cn/static/images/case2.jpg',
						tags: ['物流合作', '全国配送', '专业服务']
					},
					{
						title: '华南地区代理商',
						desc: '成为华南地区总代理，年销售额突破1000万元',
						image: 'https://img-lbc.shoplnk.cn/static/images/case3.jpg',
						tags: ['渠道代理', '区域合作', '销售突破']
					}
				]
			}
		},
		methods: {
			// 拨打电话
			makeCall() {
				uni.makePhoneCall({
					phoneNumber: '400-888-6789'
				})
			},

			// 提交申请
			submitApplication() {
				uni.showModal({
					title: '提交合作申请',
					content: '请拨打合作热线400-888-6789或发送邮件至coop@liubao.com提交详细的合作申请',
					confirmText: '立即拨打',
					success: (res) => {
						if (res.confirm) {
							this.makeCall()
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.coop-container {
		background-color: #f8f8f8;
		min-height: 100vh;
		padding-bottom: 120rpx;
	}

	.intro-section {
		background-color: #ffffff;
		padding: 40rpx;
		margin-bottom: 20rpx;
	}

	.intro-content {
		margin-bottom: 30rpx;
	}

	.intro-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
		display: block;
	}

	.intro-desc {
		font-size: 28rpx;
		color: #666;
		line-height: 1.6;
		display: block;
	}

	.intro-image {
		width: 100%;
		border-radius: 12rpx;
	}

	.type-section,
	.advantage-section,
	.requirement-section,
	.process-section,
	.case-section,
	.contact-section {
		background-color: #ffffff;
		margin: 20rpx;
		border-radius: 16rpx;
		padding: 40rpx;
	}

	.section-title {
		margin-bottom: 40rpx;
	}

	.title-text {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.type-list {
		margin-top: 20rpx;
	}

	.type-item {
		display: flex;
		align-items: flex-start;
		margin-bottom: 40rpx;
	}

	.type-item:last-child {
		margin-bottom: 0;
	}

	.type-icon {
		margin-right: 24rpx;
		margin-top: 8rpx;
	}

	.type-content {
		flex: 1;
	}

	.type-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 12rpx;
		display: block;
	}

	.type-desc {
		font-size: 26rpx;
		color: #666;
		line-height: 1.5;
		display: block;
	}

	.advantage-grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.advantage-item {
		width: 48%;
		text-align: center;
		margin-bottom: 40rpx;
	}

	.advantage-number {
		width: 80rpx;
		height: 80rpx;
		background-color: #1c705e;
		color: #ffffff;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-weight: bold;
		margin: 0 auto 20rpx;
	}

	.advantage-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 12rpx;
		display: block;
	}

	.advantage-desc {
		font-size: 24rpx;
		color: #666;
		line-height: 1.5;
		display: block;
	}

	.requirement-list {
		margin-top: 20rpx;
	}

	.requirement-category {
		margin-bottom: 40rpx;
	}

	.requirement-category:last-child {
		margin-bottom: 0;
	}

	.category-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
		display: block;
	}

	.requirement-items {
		margin-left: 20rpx;
	}

	.requirement-item {
		display: flex;
		align-items: flex-start;
		margin-bottom: 16rpx;
	}

	.requirement-text {
		font-size: 26rpx;
		color: #666;
		margin-left: 12rpx;
		line-height: 1.5;
	}

	.process-timeline {
		margin-top: 20rpx;
	}

	.timeline-item {
		position: relative;
		display: flex;
		margin-bottom: 50rpx;
	}

	.timeline-item:last-child {
		margin-bottom: 0;
	}

	.timeline-dot {
		width: 80rpx;
		height: 80rpx;
		background-color: #1c705e;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 30rpx;
		flex-shrink: 0;
	}

	.dot-number {
		font-size: 28rpx;
		font-weight: bold;
		color: #ffffff;
	}

	.timeline-content {
		flex: 1;
		padding-top: 10rpx;
	}

	.timeline-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 12rpx;
		display: block;
	}

	.timeline-desc {
		font-size: 26rpx;
		color: #666;
		line-height: 1.5;
		display: block;
	}

	.timeline-line {
		position: absolute;
		left: 40rpx;
		top: 80rpx;
		width: 4rpx;
		height: 50rpx;
		background-color: #e5e5e5;
	}

	.case-list {
		margin-top: 20rpx;
	}

	.case-item {
		display: flex;
		margin-bottom: 30rpx;
		padding: 30rpx;
		background-color: #f9f9f9;
		border-radius: 12rpx;
	}

	.case-item:last-child {
		margin-bottom: 0;
	}

	.case-image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 12rpx;
		margin-right: 20rpx;
	}

	.case-content {
		flex: 1;
	}

	.case-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 12rpx;
		display: block;
	}

	.case-desc {
		font-size: 26rpx;
		color: #666;
		line-height: 1.5;
		margin-bottom: 16rpx;
		display: block;
	}

	.case-tags {
		display: flex;
		flex-wrap: wrap;
	}

	.case-tag {
		background-color: #1c705e;
		color: #ffffff;
		font-size: 20rpx;
		padding: 6rpx 12rpx;
		border-radius: 16rpx;
		margin-right: 12rpx;
		margin-bottom: 8rpx;
	}

	.contact-info {
		margin-top: 20rpx;
	}

	.contact-item {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.contact-item:last-child {
		margin-bottom: 0;
	}

	.contact-content {
		margin-left: 20rpx;
	}

	.contact-label {
		font-size: 26rpx;
		color: #666;
		margin-bottom: 8rpx;
		display: block;
	}

	.contact-value {
		font-size: 28rpx;
		color: #333;
		font-weight: bold;
		display: block;
	}

	.bottom-actions {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #ffffff;
		border-top: 2rpx solid #e5e5e5;
		padding: 30rpx;
		display: flex;
	}

	.action-btn {
		flex: 1;
		border: none;
		border-radius: 40rpx;
		padding: 20rpx;
		font-size: 28rpx;
		margin: 0 10rpx;
	}

	.action-btn.primary {
		background-color: #1c705e;
		color: #ffffff;
	}

	.action-btn.secondary {
		background-color: transparent;
		color: #1c705e;
		border: 2rpx solid #1c705e;
	}
</style>